<template>
  <div class="line-bar-chart" :style="style">
    <KCharts
      ref="lineBarChartRef"
      :width="width"
      :height="height"
      :option="option"
      v-bind="$attrs"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { createLineBarOption } from '@/hooks/charts/line-bar-chart';
import type {
  Options,
  XType,
  YTypes,
  BaseNameDataObject
} from '@/hooks/charts/type';

defineOptions({ name: 'LineBarChart' });

interface YData extends BaseNameDataObject {
  type: 'line' | 'bar';
  barWidth?: number;
  tooltipTitles?: string[];
}
interface Props {
  width: string;
  height: string;
  options?: Options;
  xType: XType;
  yTypes: YTypes;
  xData: number[] | string[];
  yData: YData[];
}
const props = withDefaults(defineProps<Props>(), {
  options: () => {
    return {
      showLabel: true,
      labelLimit: 0
    };
  }
});
const option = ref({});
const lineBarChartRef = ref();
const style = computed(() => {
  return {
    width: props.width,
    height: props.height
  };
});

watch(
  () => props.yData,
  (yData) => {
    if (!yData?.length) {
      return;
    }

    option.value = createLineBarOption({
      options: props.options ?? {},
      xType: props.xType,
      yTypes: props.yTypes,
      xData: props.xData,
      yData
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
.line-bar-chart {
  box-sizing: border-box;
}
</style>
